<template>
  <div class="orders">
    <!-- 头部 -->
    <van-nav-bar
      style="background-color:#f2f2f2"
      title="会员订单"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tabs v-model="active" swipeable @change="onChange">
      <van-tab
        v-for="item in tabs"
        :key="item.name"
        :title="item.title"
        :name="item.name"
      >
        <div class="orderBox">
          <div class="orderInfo" v-for="item in orderArr" :key="item.danhao">
            <p>
              <span>单号：{{ item.danhao }}</span>
              <span style="font-weight: 600;">{{ item.zt | fifterState }}</span>
            </p>
            <div class="orderList">
              <div
                class="goodsIteminfo"
                v-for="list in item.cps"
                :key="list.cp_id"
              >
                <div class="goodsIteminfoImg">
                  <img :src="list.tupian" alt="图片" />
                </div>
                <div class="goodsIteminfoMsg">
                  <h5>{{ list.mingcheng }}</h5>
                  <p class="tips">
                    库存：{{ list.kucun }} | 限购：{{ list.xiangou }}
                  </p>
                  <p class="setPrice">
                    <span style="color: #ee0a24">￥{{ list.jiage }}</span>
                    <span>数量 x{{ list.shuliang }}</span>
                  </p>
                </div>
              </div>
            </div>
            <div class="totalInfo">
              {{ item.chanpinshu }} 件产品 | 总金额：<span style="color:#ee0a24"
                >￥{{ item.feiyong }}</span
              >
            </div>
            <div class="orderBtns" v-if="item.zt == '4' || item.zt == '2'"> 
                <van-button v-if="item.zt == '4'" type="primary" size="small" @click="operationOrderFun(item,'received')">确认收货</van-button>       
              <template v-if="item.zt == '2'">        
                <van-button plain size="small" style="margin-right:20px" @click="operationOrderFun(item,'cancelOrder')">取消订单</van-button>
                <van-button type="primary" size="small" @click="operationOrderFun(item,'payment')">去付款</van-button>
              </template>
            </div>
          </div>
          <!-- 数据为空 -->
          <van-empty v-if="orderArr.length === 0" description="暂时没有数据" />
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import SERVE from "@/axios/index";
export default {
  name: "order",
  data() {
    return {
      active: 3,
      tabs: [
        { title: "待付款", name: 2 },
        { title: "待发货", name: 3 },
        { title: "待收货", name: 4 },
        { title: "待评论", name: 5 },
        { title: "全部", name: 0 },
      ],
      orderArr: [],
    };
  },
  mounted() {
    this.active = Number(this.$route.query.type);
    this.getOrderInfo(this.active);
  },
  methods: {
    onClickLeft() {
      this.$router.push("/vip");
    },
    onChange() {
      this.getOrderInfo(this.active);
    },
    getOrderInfo(type) {
      // 根据类型获取订单
      SERVE.getOrderInfo({
        params: {
          cs_uid: window.localStorage.u_id, //uid
          cs_lxid: type, //订单类型
        },
      })
        .then((res) => {
          this.orderArr = res.data;
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 取消 付款 收货
    operationOrderFun(item,type){
      this.$dialog.confirm({
          title: "提示",
          message: type ==="received"? "是否确认收货？":(type ==="cancelOrder"? "是否取消订单？": "是否确认付款？"),
        })
        .then(() => {
          SERVE[type]({
            params:{
              cs_uid:localStorage.u_id,    //uid
              cs_danhaoid:item.danhao //订单号
            }
          }).then((res) => {
             this.$notify({
                type: res.data.zt === "yes" ? "success" : "warning",
                message: res.data.xinxi,
                duration: 1000,
              });
              if (res.data.zt === "yes") {
                this.getOrderInfo(this.active);
              }
          }).catch((err) => {
            console.log('err',err);
          });
        })
        .catch(() => {});
    }
  },
  filters: {
    // 2 取消订单 去付款
		// 4 确认收货
    fifterState(value) {
      switch (value) {
        case 2:
          return "待付款";
        case 3:
          return "待发货";
        case 4:
          return "待收货";
        case 5:
          return "待评论";
        case 0:
          return "全部";
        default:
          return "全部";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.orders {
  .orderBox {
    height: calc(100vh - 90px);
    overflow-y: scroll;
    width: 100%;
    .orderInfo {
      border-bottom: 10px solid #f2f2f2;
      & > p {
        padding: 0 15px;
        box-sizing: border-box;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #f2f2f2;
      }
      .orderList {
        padding: 0 15px;
        box-sizing: border-box;
        .goodsIteminfo {
          background-color: #fff;
          min-height: 100px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          word-break: break-all;
          border-bottom: 1px solid #f2f2f2;
          .goodsIteminfoImg {
            width: 80px;
            height: 80px;
            margin-right: 10px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .goodsIteminfoMsg {
            width: calc(100% - 90px);
            height: 100%;
            padding: 10px 0;
            box-sizing: border-box;
            h5 {
              margin: 0;
            }
            .tips {
              font-size: 12px;
              margin: 6px 0;
            }
            .setPrice {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
          }
        }
      }
      .totalInfo {
        font-size: 14px;
        font-weight: 600;
        height: 40px;
        line-height: 40px;
        width: 100%;
        border-top: 1px solid #f2f2f2;
        border-bottom: 1px solid #f2f2f2;
        text-align: right;
        padding: 0 15px;
        box-sizing: border-box;
      }
      .orderBtns{
        height: 40px;
        padding: 0 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
}
</style>
